{% extends "pos/base.html" %}
{% load static %}

{% block title %}Android Sales Approval{% endblock %}
{% block heading %}Android Sales Approval{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'styles/pos_api_v2/offline/approvals/approval.css' %}">
{% endblock %}

{% block content %}

<div class="approval-page">

    <form method="get" class="approval-filter-card">
        <div class="row">

            <div class="col-md-2">
                <label>Salesman</label>
                <select name="salesman_id" class="form-control">
                    <option value="">All Salesmen</option>
                    {% for s in salesman_list %}
                        <option value="{{ s.id }}" {% if request.GET.salesman_id == s.id|stringformat:"s" %}selected{% endif %}>
                            {{ s.username }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-2">
                <label>Customer</label>
                <input type="text" name="customer" class="form-control" placeholder="Search customer..." value="{{ request.GET.customer }}">
            </div>

            <div class="col-md-2">
                <label>Date From</label>
                <input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
            </div>

            <div class="col-md-2">
                <label>Date To</label>
                <input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
            </div>

            <div class="col-md-1">
                <label>Min</label>
                <input type="number" step="0.01" name="min_amount" class="form-control" value="{{ request.GET.min_amount }}">
            </div>

            <div class="col-md-1">
                <label>Max</label>
                <input type="number" step="0.01" name="max_amount" class="form-control" value="{{ request.GET.max_amount }}">
            </div>

        </div>

        <div class="approval-filter-actions">
            <button type="submit" class="btn btn-primary">Apply Filters</button>
            <a href="{% url 'pos_api_v2:offline:approvals:sale_approval_list' %}" class="btn btn-light">Clear</a>
            <span class="approval-count">Showing {{ rows|length }} records</span>
        </div>
    </form>

    <div class="approval-title-row">
        <div>
            <h4>Android Sales <span class="badge badge-warning">Staging</span></h4>
            <p>Sales posted from app awaiting approval.</p>
        </div>

        <form id="formStockPdf"
              method="post"
              action="{% url 'pos_api_v2:offline:approvals:sale_product_stock_pdf' %}"
              target="_blank"
              style="display:inline;">
            {% csrf_token %}
            <button type="submit"
                    class="btn btn-dark"
                    onclick="return copySelectedSalesToForm('formStockPdf');">
                PDF Product Stock Report
            </button>
        </form>
        <div>
            <a id="btnPlotShops"
               href="{% url 'pos_api_v2:offline:approvals:sale_shop_map' %}"
               class="btn btn-info"
               onclick="return openSelectedSalesMap(this);">
                Plot Shops
            </a>

            <a href="{% url 'pos_api_v2:offline:approvals:payment_approval_list' %}" class="btn btn-outline-primary">
                Payment Approvals
            </a>
        </div>
    </div>

    <div class="approval-summary-row">
        <div class="approval-summary-card">
            <span>Invoices</span>
            <strong>{{ summary.invoices }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Total Amount</span>
            <strong>{{ summary.total_amount|floatformat:2 }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Received</span>
            <strong>{{ summary.received|floatformat:2 }}</strong>
        </div>
        <div class="approval-summary-card">
            <span>Total Bonus</span>
            <strong>{{ summary.total_bonus|floatformat:2 }}</strong>
        </div>
    </div>

    {% if merge_enabled and merge_required %}
    <div class="alert alert-warning">
        <strong>Same customer invoices found.</strong>
        First merge same customer invoices before approval.

        <ul style="margin-top:8px;">
            {% for g in merge_groups %}
                <li>
                    {{ g.customer_name }} —
                    {{ g.count }} invoices:
                    {% for inv in g.invoice_nos %}
                        #{{ inv }}{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}

    <div class="approval-table-card">

        <form id="salesBulkForm" method="post" action="{% url 'pos_api_v2:offline:approvals:sale_approve' %}">
            {% csrf_token %}

            <div class="mb-2">

            {% if merge_enabled %}
                <button type="submit"
                        class="btn btn-warning btn-sm"
                        formaction="{% url 'pos_api_v2:offline:approvals:sale_merge_same_customer' %}"
                        onclick="return validateSelectedSalesForMerge();">
                    Merge Same Customer
                </button>
            {% endif %}

            <button type="submit"
                    class="btn btn-success btn-sm"
                    {% if merge_enabled and merge_required %}disabled{% endif %}
                    onclick="return validateSelectedSales();">
                Approve Selected
            </button>

            <button type="submit"
                    class="btn btn-danger btn-sm"
                    formaction="{% url 'pos_api_v2:offline:approvals:sale_reject_bulk' %}"
                    onclick="return confirmBulkRejectSales();">
                Reject Selected
            </button>

        </div>

            <table class="table table-bordered table-hover approval-table">
                <thead>
                    <tr>
                        <th class="text-center" style="width:45px;">
                            <input type="checkbox" id="chkAllSales">
                        </th>
                        <th>Invoice</th>
                        <th>Date</th>
                        <th>Customer</th>
                        <th>Salesman</th>
                        <th class="text-right">Total</th>
                        <th class="text-right">Received</th>
                        <th class="text-right">Bonus</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>

                <tbody>
                    {% for r in rows %}
                        <tr>
                            <td class="text-center">
                                <input type="checkbox" class="sale-check" name="invoice_nos" value="{{ r.invoice_no }}">
                            </td>

                            <td>#{{ r.invoice_no }}</td>
                            <td>{{ r.payment.transaction_date }}</td>
                            <td>{{ r.customer_name }}
                                {% if r.needs_merge %}
                                <br>
                                <span class="badge badge-warning">
                                    Needs Merge: {{ r.merge_count }} invoices
                                </span>
                            {% endif %}

                            </td>

                            <td>
                                {{ r.salesman_name|default:"-" }}
                                {% if r.booker_name %}
                                    <br>
                                    <small class="text-muted">Booker: {{ r.booker_name }}</small>
                                {% endif %}
                            </td>

                            <td class="text-right">{{ r.payment.total_amount|floatformat:2 }}</td>
                            <td class="text-right">{{ r.payment.amount_transaction|floatformat:2 }}</td>
                            <td class="text-right">{{ r.total_bonus|floatformat:2 }}</td>

                            <td class="text-center">
                                <a class="btn btn-sm btn-primary" href="{% url 'pos_api_v2:offline:approvals:sale_approval_detail' r.invoice_no %}">
                                    View
                                </a>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="11" class="approval-empty">
                                No staging sales found.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

        </form>

    </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var chkAll = document.getElementById("chkAllSales");

    if (chkAll) {
        chkAll.addEventListener("change", function () {
            var checks = document.querySelectorAll(".sale-check");
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = chkAll.checked;
            }
        });
    }
});

var MERGE_REQUIRED = {% if merge_enabled and merge_required %}true{% else %}false{% endif %};

function openSelectedSalesMap(link){
    var checks = document.querySelectorAll('input[name="invoice_nos"]:checked');
    var baseUrl = link.getAttribute('href');
    var params = [];

    for(var i = 0; i < checks.length; i++){
        params.push('invoice_nos=' + encodeURIComponent(checks[i].value));
    }

    if(params.length > 0){
        window.location.href = baseUrl + '?' + params.join('&');
    }else{
        window.location.href = baseUrl;
    }

    return false;
}

function copySelectedSalesToForm(formId){
    var form = document.getElementById(formId);
    var checks = document.querySelectorAll('input[name="invoice_nos"]:checked');

    if(!form){
        alert("Form not found.");
        return false;
    }

    var oldInputs = form.querySelectorAll('input[name="invoice_nos"]');
    for(var i = 0; i < oldInputs.length; i++){
        oldInputs[i].parentNode.removeChild(oldInputs[i]);
    }

    if(checks.length <= 0){
        alert("Please select at least one invoice.");
        return false;
    }

    for(var j = 0; j < checks.length; j++){
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "invoice_nos";
        input.value = checks[j].value;
        form.appendChild(input);
    }

    return true;
}

function getSelectedSalesCount(){
    var checks = document.querySelectorAll('input[name="invoice_nos"]:checked');
    return checks.length;
}

function validateSelectedSales(){
    if(getSelectedSalesCount() <= 0){
        alert("Please select at least one invoice.");
        return false;
    }

    if(MERGE_REQUIRED){
        alert("First merge same customer invoices before approval.");
        return false;
    }

    return true;
}

function validateSelectedSalesForMerge(){
    if(getSelectedSalesCount() <= 0){
        alert("Please select at least one invoice.");
        return false;
    }

    return confirm("Merge same customer invoices before approval?");
}

function confirmBulkRejectSales(){
    var count = getSelectedSalesCount();

    if(count <= 0){
        alert("Please select at least one invoice to reject.");
        return false;
    }

    return confirm(
        "Reject " + count + " selected invoice(s)?\n\n" +
        "This will permanently delete staging sale rows."
    );
}
</script>
{% endblock %}